<template>
  <view class="password-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration top-left"></view>
    <view class="bg-decoration bottom-right"></view>

    <!-- 顶部导航 -->
    <view class="nav-header">
      <view class="nav-back" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="nav-title">修改密码</text>
      <view class="nav-placeholder"></view>
    </view>

    <!-- 主要内容 -->
    <view class="password-content">
      <!-- 页面标题和描述 -->
      <view class="page-header">
        <text class="page-title">账户安全</text>
        <text class="page-subtitle">定期修改密码有助于保护您的账户安全</text>
      </view>

      <!-- 修改密码卡片 -->
      <view class="password-form card">
        <!-- 当前密码输入 -->
        <view class="input-wrapper">
          <text class="input-label">当前密码</text>
          <view class="input-group">
            <view class="input-icon">
              <text class="iconfont icon-lock">🔒</text>
            </view>
            <input class="input-field" :type="showCurrentPassword ? 'text' : 'password'" placeholder="请输入当前密码"
              v-model="formData.currentPassword" :class="{ 'input-error': errors.currentPassword }" />
            <view class="password-toggle" @click="toggleCurrentPassword">
              <text class="toggle-icon">{{ showCurrentPassword ? '👁️' : '👁️‍🗨️' }}</text>
            </view>
          </view>
          <text v-if="errors.currentPassword" class="error-text">{{ errors.currentPassword }}</text>
        </view>

        <!-- 新密码输入 -->
        <view class="input-wrapper">
          <text class="input-label">新密码</text>
          <view class="input-group">
            <view class="input-icon">
              <text class="iconfont icon-lock">🔒</text>
            </view>
            <input class="input-field" :type="showNewPassword ? 'text' : 'password'" placeholder="请输入新密码（6-20位字母、数字组合）"
              v-model="formData.newPassword" :class="{ 'input-error': errors.newPassword }"
              @input="checkPasswordStrength" />
            <view class="password-toggle" @click="toggleNewPassword">
              <text class="toggle-icon">{{ showNewPassword ? '👁️' : '👁️‍🗨️' }}</text>
            </view>
          </view>
          <text v-if="errors.newPassword" class="error-text">{{ errors.newPassword }}</text>
        </view>

        <!-- 密码强度指示器 -->
        <view v-if="formData.newPassword" class="password-strength">
          <view class="strength-labels">
            <text class="strength-text">密码强度：</text>
            <text class="strength-value" :class="passwordStrengthClass">
              {{ passwordStrengthText }}
            </text>
          </view>
          <view class="strength-bar">
            <view class="strength-indicator" :class="passwordStrengthClass"
              :style="{ width: passwordStrength * 25 + '%' }"></view>
          </view>
          <text class="strength-tips" v-if="passwordStrength <= 2">建议增加密码长度或使用更多字符类型</text>
        </view>

        <!-- 确认新密码输入 -->
        <view class="input-wrapper">
          <text class="input-label">确认新密码</text>
          <view class="input-group">
            <view class="input-icon">
              <text class="iconfont icon-lock">🔒</text>
            </view>
            <input class="input-field" :type="showConfirmPassword ? 'text' : 'password'" placeholder="请再次输入新密码"
              v-model="formData.confirmPassword" :class="{ 'input-error': errors.confirmPassword }" />
            <view class="password-toggle" @click="toggleConfirmPassword">
              <text class="toggle-icon">{{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}</text>
            </view>
          </view>
          <text v-if="errors.confirmPassword" class="error-text">{{ errors.confirmPassword }}</text>
        </view>

        <!-- 提交按钮 -->
        <button class="submit-btn gradient-btn" :class="{ 'btn-loading': isLoading }"
          :disabled="isLoading || !canSubmit" @click="handleSubmit">
          <text v-if="isLoading" class="loading-icon">⏳</text>
          <text class="btn-text">{{ isLoading ? '修改中...' : '确认修改' }}</text>
        </button>

        <!-- 提示信息 -->
        <view class="tips-section">
          <text class="tips-text">• 密码长度应为6-20位</text>
          <text class="tips-text">• 建议使用字母、数字和符号组合</text>
          <text class="tips-text">• 请妥善保管您的密码</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/api/request.js';

export default {
  data() {
    return {
      formData: {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      errors: {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      showCurrentPassword: false,
      showNewPassword: false,
      showConfirmPassword: false,
      isLoading: false,
      passwordStrength: 0, // 0: 未设置, 1: 弱, 2: 中, 3: 强
      passwordStrengthText: '',
      passwordStrengthClass: ''
    };
  },
  computed: {
    // 计算是否可以提交表单
    canSubmit() {
      return (
        this.formData.currentPassword &&
        this.formData.newPassword &&
        this.formData.confirmPassword &&
        this.formData.newPassword === this.formData.confirmPassword &&
        !this.errors.currentPassword &&
        !this.errors.newPassword &&
        !this.errors.confirmPassword
      );
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 切换密码显示状态
    toggleCurrentPassword() {
      this.showCurrentPassword = !this.showCurrentPassword;
    },

    toggleNewPassword() {
      this.showNewPassword = !this.showNewPassword;
    },

    toggleConfirmPassword() {
      this.showConfirmPassword = !this.showConfirmPassword;
    },

    // 检查密码强度
    checkPasswordStrength() {
      const password = this.formData.newPassword;
      let strength = 0;

      // 密码长度检查
      if (password.length >= 8) strength++;

      // 包含字母检查
      if (/[a-zA-Z]/.test(password)) strength++;

      // 包含数字检查
      if (/[0-9]/.test(password)) strength++;

      // 包含特殊字符检查
      if (/[^a-zA-Z0-9]/.test(password)) strength++;

      this.passwordStrength = strength;

      // 设置密码强度文本和样式
      if (strength <= 1) {
        this.passwordStrengthText = '弱';
        this.passwordStrengthClass = 'weak';
      } else if (strength <= 2) {
        this.passwordStrengthText = '中';
        this.passwordStrengthClass = 'medium';
      } else {
        this.passwordStrengthText = '强';
        this.passwordStrengthClass = 'strong';
      }
    },

    // 验证表单
    validateForm() {
      let isValid = true;

      // 重置错误信息
      this.errors = {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
      };

      // 验证当前密码
      if (!this.formData.currentPassword) {
        this.errors.currentPassword = '请输入当前密码';
        isValid = false;
      }

      // 验证新密码
      if (!this.formData.newPassword) {
        this.errors.newPassword = '请输入新密码';
        isValid = false;
      } if (this.formData.newPassword.length < 6 || this.formData.newPassword.length > 20) {
        this.errors.newPassword = '密码长度应为6-20位';
        isValid = false;
      }

      // 验证确认密码
      if (!this.formData.confirmPassword) {
        this.errors.confirmPassword = '请再次输入新密码';
        isValid = false;
      } else if (this.formData.confirmPassword !== this.formData.newPassword) {
        this.errors.confirmPassword = '两次输入的密码不一致';
        isValid = false;
      }

      // 检查新密码是否与当前密码相同
      if (this.formData.currentPassword && this.formData.newPassword && this.formData.currentPassword === this.formData.newPassword) {
        this.errors.newPassword = '新密码不能与当前密码相同';
        isValid = false;
      }

      return isValid;
    },

    // 提交修改密码请求
    async handleSubmit() {
      // 验证表单
      if (!this.validateForm()) {
        return;
      }

      try {
        this.isLoading = true;

        // 构建请求数据
        const requestData = {
          currentPassword: this.formData.currentPassword,
          newPassword: this.formData.newPassword
        };

        // 调用修改密码API
        const res = await request.put('/api/users/updatePassword', requestData, {
          showLoading: false
        });

        if (res) {
          // 显示成功提示
          uni.showToast({
            title: '密码修改成功，请重新登录',
            icon: 'success',
            duration: 2000
          });

          // 重置表单
          this.formData = {
            currentPassword: '',
            newPassword: '',
            confirmPassword: ''
          };

          uni.removeStorageSync("userInfo");
          setTimeout(() => {
            // 这里添加退出登录的逻辑
            uni.reLaunch({
              url: "/pages/login/index",
            });
          }, 1000);
        } else {
          // 显示错误提示
          uni.showToast({
            title: res?.msg || '密码修改失败，请重试',
            icon: 'none',
            duration: 2000
          });
        }
      } catch (error) {
        console.error('修改密码失败:', error);
        uni.showToast({
          title: '网络异常，请稍后重试',
          icon: 'none',
          duration: 2000
        });
      } finally {
        this.isLoading = false;
      }
    }
  }
};
</script>

<style scoped lang="scss">
// 全局变量
$primary-color: #667eea;
$primary-dark: #764ba2;
$danger-color: #dc2626;
$warning-color: #d97706;
$success-color: #16a34a;
$text-primary: #333;
$text-secondary: #64748b;
$text-light: #94a3b8;
$border-color: #e2e8f0;
$background-color: #f8fafc;
$card-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
$input-focus-shadow: 0 0 0 8rpx rgba(102, 126, 234, 0.15);

.password-container {
  min-height: 100vh;
  background-color: $background-color;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  opacity: 0.05;
  z-index: 0;
}

.bg-decoration.top-left {
  top: -200rpx;
  left: -200rpx;
  background: radial-gradient(circle, $primary-color 0%, transparent 70%);
}

.bg-decoration.bottom-right {
  bottom: -200rpx;
  right: -200rpx;
  background: radial-gradient(circle, $primary-dark 0%, transparent 70%);
}

/* 顶部导航 */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  z-index: 10;
  backdrop-filter: blur(10rpx);
}

.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.nav-back:active {
  background-color: $background-color;
  transform: scale(0.95);
}

.back-icon {
  font-size: 36rpx;
  color: $text-primary;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 600;
  color: $text-primary;
}

.nav-placeholder {
  width: 60rpx;
}

/* 主要内容 */
.password-content {
  flex: 1;
  padding: 50rpx 30rpx;
  position: relative;
  z-index: 1;
}

/* 页面标题 */
.page-header {
  margin-bottom: 40rpx;
  text-align: center;
}

.page-title {
  display: block;
  font-size: 48rpx;
  font-weight: 700;
  color: $text-primary;
  margin-bottom: 10rpx;
  background: linear-gradient(135deg, $primary-color, $primary-dark);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-subtitle {
  display: block;
  font-size: 28rpx;
  color: $text-secondary;
}

/* 表单样式 */
.password-form {
  background-color: #fff;
  border-radius: 30rpx;
  padding: 50rpx 40rpx;
  box-shadow: $card-shadow;
  position: relative;
  overflow: hidden;
}

/* 输入框样式 */
.input-wrapper {
  margin-bottom: 40rpx;
  position: relative;
}

.input-label {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: $text-primary;
  margin-bottom: 16rpx;
}

.input-group {
  display: flex;
  align-items: center;
  border: 3rpx solid $border-color;
  border-radius: 20rpx;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: #fff;
}

.input-group:focus-within {
  border-color: $primary-color;
  box-shadow: $input-focus-shadow;
  transform: translateY(-2rpx);
}

.input-group:has(.input-error) {
  border-color: $danger-color;
}

.input-icon {
  width: 100rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $background-color;
  border-right: 2rpx solid $border-color;
  transition: background-color 0.3s ease;
}

.input-group:focus-within .input-icon {
  background-color: rgba(102, 126, 234, 0.08);
}

.iconfont {
  font-size: 36rpx;
  color: $primary-color;
}

.input-field {
  flex: 1;
  height: 100rpx;
  padding: 0 24rpx;
  font-size: 30rpx;
  color: $text-primary;
  background-color: #fff;
}

.input-field::placeholder {
  color: $text-light;
  font-weight: 400;
}

.input-field.input-error {
  color: $danger-color;
}

.password-toggle {
  width: 100rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.password-toggle:active {
  background-color: $background-color;
}

.toggle-icon {
  font-size: 32rpx;
  color: $text-secondary;
  transition: color 0.3s ease;
}

.password-toggle:active .toggle-icon {
  color: $primary-color;
}

/* 错误提示 */
.error-text {
  display: block;
  margin-top: 12rpx;
  font-size: 26rpx;
  color: $danger-color;
  padding-left: 16rpx;
  position: relative;
  animation: shake 0.3s ease-in-out;
}

.error-text::before {
  content: '⚠️';
  position: absolute;
  left: -4rpx;
  top: -2rpx;
  font-size: 24rpx;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5rpx);
  }

  75% {
    transform: translateX(5rpx);
  }
}

/* 密码强度指示器 */
.password-strength {
  margin: -20rpx 0 40rpx 0;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10rpx);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.strength-labels {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
  justify-content: space-between;
}

.strength-text {
  font-size: 26rpx;
  color: $text-secondary;
  font-weight: 500;
}

.strength-value {
  font-size: 26rpx;
  font-weight: 700;
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  transition: all 0.3s ease;
}

.strength-value.weak {
  color: #fff;
  background-color: $danger-color;
}

.strength-value.medium {
  color: #fff;
  background-color: $warning-color;
}

.strength-value.strong {
  color: #fff;
  background-color: $success-color;
}

.strength-bar {
  width: 100%;
  height: 10rpx;
  background-color: $border-color;
  border-radius: 5rpx;
  overflow: hidden;
  position: relative;
}

.strength-indicator {
  height: 100%;
  border-radius: 5rpx;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.strength-indicator::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.strength-indicator.weak {
  background: linear-gradient(90deg, #ef4444, $danger-color);
}

.strength-indicator.medium {
  background: linear-gradient(90deg, #f59e0b, $warning-color);
}

.strength-indicator.strong {
  background: linear-gradient(90deg, #22c55e, $success-color);
}

.strength-tips {
  margin-top: 12rpx;
  font-size: 24rpx;
  color: $warning-color;
  font-style: italic;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  height: 110rpx;
  border: none;
  border-radius: 55rpx;
  color: #fff;
  font-size: 34rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30rpx;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.gradient-btn {
  background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
  box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.3);
}

.gradient-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.8s ease;
}

.gradient-btn:active::before {
  left: 100%;
}

.gradient-btn:active {
  transform: scale(0.97);
  box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.25);
}

.gradient-btn:disabled {
  background: #e5e7eb;
  color: $text-light;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.gradient-btn.btn-loading {
  background: #e5e7eb;
  color: $text-light;
}

.loading-icon {
  margin-right: 12rpx;
  font-size: 32rpx;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.btn-text {
  font-size: 34rpx;
  font-weight: 600;
  color: #fff;
  letter-spacing: 2rpx;
}

/* 提示信息 */
.tips-section {
  margin-top: 40rpx;
  padding: 24rpx;
  background-color: $background-color;
  border-radius: 16rpx;
  border: 2rpx solid $border-color;
  animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tips-text {
  display: block;
  font-size: 26rpx;
  color: $text-secondary;
  margin-bottom: 12rpx;
  line-height: 1.6;
  position: relative;
  padding-left: 34rpx;
}

.tips-text:last-child {
  margin-bottom: 0;
}

/* 响应式优化 */
@media (max-width: 750rpx) {
  .password-content {
    padding: 30rpx 24rpx;
  }

  .page-header {
    margin-bottom: 30rpx;
  }

  .page-title {
    font-size: 42rpx;
  }

  .page-subtitle {
    font-size: 26rpx;
  }

  .password-form {
    padding: 40rpx 30rpx;
    border-radius: 24rpx;
  }

  .input-wrapper {
    margin-bottom: 32rpx;
  }

  .input-label {
    font-size: 26rpx;
  }

  .input-group {
    border-radius: 16rpx;
  }

  .input-icon {
    width: 88rpx;
    height: 88rpx;
  }

  .input-field {
    height: 88rpx;
    font-size: 28rpx;
  }

  .password-toggle {
    width: 88rpx;
    height: 88rpx;
  }

  .submit-btn {
    height: 100rpx;
    border-radius: 50rpx;
    font-size: 32rpx;
  }

  .tips-section {
    padding: 20rpx;
  }

  .tips-text {
    font-size: 24rpx;
  }

  .bg-decoration {
    width: 300rpx;
    height: 300rpx;
  }

  .bg-decoration.top-left {
    top: -150rpx;
    left: -150rpx;
  }

  .bg-decoration.bottom-right {
    bottom: -150rpx;
    right: -150rpx;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .password-container {
    background-color: #0f172a;
  }

  .nav-header {
    background-color: #1e293b;
  }

  .nav-title,
  .back-icon {
    color: #f1f5f9;
  }

  .page-title {
    color: #f1f5f9;
    background: linear-gradient(135deg, #818cf8, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .page-subtitle {
    color: #94a3b8;
  }

  .password-form {
    background-color: #1e293b;
  }

  .input-label {
    color: #f1f5f9;
  }

  .input-group {
    border-color: #334155;
    background-color: #1e293b;
  }

  .input-icon {
    background-color: #0f172a;
    border-right-color: #334155;
  }

  .input-field {
    color: #f1f5f9;
    background-color: #1e293b;
  }

  .input-field::placeholder {
    color: #64748b;
  }

  .tips-section {
    background-color: #0f172a;
    border-color: #334155;
  }

  .tips-text {
    color: #94a3b8;
  }
}
</style>